<template>
	<view class="cu-list menu-avatar">
		<view class="cu-item" v-for="(food,index) in hotList" :key="index">
			<view class="cu-avatar lg" :style="{ 'background-image': 'url('+food.dish_img+')' }">
			</view>
			<view class="content">
				<view class="">{{food.name}}</view>
				<view class="text-gray text-sm flex dish-desc">
					<text>
						{{food.desc|filterDishDesc}}
					</text>
				</view>
				<view class="grid col-2 ">
					<view class="text-left">
						<text class="margin-right-xs">￥{{food.price}}</text>
						<text class="text-gray text-sm">销量:{{food.order_count}}</text>
					</view>

					<view class="text-right padding-right"style="width: 48%;">
						<button v-if="food.num > 0" class="cu-btn sm cuIcon lines-gray round padding-sm"
							style="font-size: 40upx;">
							<text class="cuIcon-move text-lg text-bold"></text>
						</button>
						<text v-if="food.num > 0" class="padding-lr-xs margin-lr-sl">{{food.num}}</text>
						<button class="cu-btn sm cuIcon bg-orange padding-sm" style="font-size: 40upx;">
							<text class="cuIcon-add text-lg text-bold"></text>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- <u-button class="hotDish">当前是爆款推荐组件，也就是按照菜品的购买量进行推荐</u-button> -->
</template>

<script>
	import {
		request
	} from '@/common/request.js'
	import {
		mapMutations
	} from 'vuex'
	export default {
		props:{
				hotList:{
					type:Array,
					require:false
				}
		},
		data() {
			return {
				// hotDishList: [{
				// 		name: '正山小种香干',
				// 		desc: '200g,色泽诱人，香气扑鼻',
				// 		dish_img: 'http://www.ahlsg.com/uploads/img/20180420/1524211331241666.jpg',
				// 		price: 19,
				// 		order_count:10,
				// 		num: 0
				// 	},
				// 	{
				// 		name: '美味鸭翅',
				// 		desc: '300g,卤鸭翅是畅销美味，鸭翅在鸭身上是非常好吃的地方',
				// 		dish_img: 'http://www.ahlsg.com/uploads/img/20180420/1524210197484193.jpg',
				// 		price: 35,
				// 		order_count:20,
				// 		num: 0
				// 	}
				// ]
			}
		},
		computed: {
			// ...mapMutations(['ADD2CART'])
		},
		onLoad() {
			this.getHotDish()
		},
		filters: {
			// 菜品介绍超出隐藏
			filterDishDesc(desc) {
				if (desc.length > 28) {
					const text = desc.replace(/[\n-]/g, ' ');
					return text.slice(0,29)
				}
				return desc
			}
		},
		methods: {
			...mapMutations(['ADD2CART'])
		}
	}
</script>
<style lang="scss" scoped>
	.cu-item {
		width: 100%;
		// border-radius: 5px;
		margin-bottom: 14px;
		text-align: center;
		// background-color: #f1f1f1;
		// margin: 0;
		border: none;
		// height: 50px;
		position: relative;
		
		
		border-radius: 10px;
		background: #f1f1f1;
		box-shadow:  9px 9px 18px #e0e0e0,
		             -9px -9px 18px #fff;
		
	}
	
	.cu-item.cur {
		background-color: #fff;
	}
	
	.cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: #f37b1d;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}
	
	.cu-list.menu-avatar>.cu-item .content {
		width: calc(100% - 120upx);
	}
	
	.cu-list.menu-avatar>.cu-item {
		height: 100px;
	}
	
</style>

